<template>
  <div>
    <div class="rebate_scroll">
      <div class="header">
        <div class="nav-bg">
          <div class="nav-bar">
            <div class="left" @click="backClick">
              <img src="../../../assets/img/rebate/ic_back_left.png" alt="" />
            </div>
            <div class="center">申请详情</div>
            <div class="right" @click="$router.push('/rebate/help')">
              常见问题
            </div>
          </div>
        </div>
        <div class="content_box">
          <div class="feedback_status">返利状态</div>
          <div class="content_title">等待受理</div>
          <div class="test">即将提交游戏商处理,期间请勿改名</div>
          <div class="tips-box">
            <div class="tips-list">
              <span>1</span>
              <p>若返利信息无误，则在申请后24小时内到账；</p>
            </div>
            <div class="tips-list">
              <span>2</span>
              <p>遇节假日则有可能延迟，请耐心等待！</p>
            </div>
          </div>
        </div>
      </div>
      <div class="game_info">
        <ul class="info_list">
          <li>
            <span>游戏名</span>
            <h3>{{ info.gamename }}</h3>
          </li>
          <li>
            <span>充值小号</span>
            <h3>{{ info.xh_showname }}({{ username }})</h3>
          </li>
          <li>
            <span>充值时间</span>
            <h3>{{ info.day_time }}</h3>
          </li>
          <li>
            <span>充值金额</span>
            <h3 style="color: #ec2424">{{ info.default_total }}元</h3>
          </li>
          <li>
            <span>游戏区服</span>
            <h3>{{ info.servername }}</h3>
          </li>
          <li>
            <span>角色名</span>
            <h3>{{ info.role_name }}</h3>
          </li>
          <li>
            <span>道具申请</span>
            <h3>{{ info.prop_beizhu }}</h3>
          </li>
          <li>
            <span>备注</span>
            <h3>{{ info.user_beizhu }}</h3>
          </li>
          <li>
            <span>申请时间</span>
            <h3>{{ info.addtime | Timestamp }}</h3>
          </li>
        </ul>
      </div>
      <div class="btn_box" @click="isShow = true">如需重新申请，点击撤回</div>
    </div>
    <van-popup v-model="isShow" round>
      <div class="dlg">
        <div class="dlg_header">撤回原因</div>
        <div class="dlg_content">
          <div class="dlg_content_title">
            <span style="color: #e32222">*</span>
            <h3>请选择撤回原因</h3>
          </div>
          <van-radio-group v-model="radio">
            <van-radio checked-color="#ff5543" name="1"
              >还要继续充值，申请撤回重新提交金额</van-radio
            >
            <van-radio checked-color="#ff5543" name="2">信息填写有误</van-radio>
            <van-radio checked-color="#ff5543" name="3"
              >道具没有选/道具填写错误</van-radio
            >
          </van-radio-group>
          <div class="dlg_tips">*撤回后请在申请失败记录中修改重新提交！</div>
        </div>
        <div class="dlg_footer">
          <div class="flex" @click="notClick">不撤回</div>
          <div class="flex confirm" @click="sureClick">确定撤回</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
// import {getPost} from '../../../network/post'

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    username: {
      type: String,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isShow: false,
      gameid: "5700",
      radio: "1",
    };
  },
  methods: {
    backClick() {
      this.$router.back();
    },
    notClick() {
      this.isShow = false;
    },
    sureClick() {
      this.isShow = false;
      var url = "/rebate_apply_revoke";
      var data = {
        apply_id: this.$route.params.iid,
        rmk_id: this.radio,
      };
      getPost(url, data).then((res) => {
        console.log(res);
        if (res.status == "ok") {
          this.$emit("change-status");
        } else {
          Toast(res.info);
        }
      });
    },
  },
  filters: {
    Timestamp(timestamp) {
      var dateObj = new Date(timestamp * 1000);
      var year = dateObj.getYear() + 1900;
      var month = dateObj.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      var theDate = dateObj.getDate();
      theDate = theDate < 10 ? "0" + theDate : theDate;
      var hour = dateObj.getHours();
      var minute = dateObj.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = dateObj.getSeconds();
      second = second < 10 ? "0" + second : second;
      return (
        year +
        "-" +
        month +
        "-" +
        theDate +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
  },
};
</script>

<style scoped>
.header {
  position: relative;
  width: 10rem;
  height: 7.973333rem;
  background: #ffffff;
}

.nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 80% 80%;
  width: 10rem;
  height: 3.92rem;
  background: linear-gradient(180deg, #616bef, #646eee);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.173333rem;
  padding: 0 0.426667rem;
}

.nav-bar .left {
  width: 1.533333rem;
  height: 0.453333rem;
}

.nav-bar .left img {
  width: 0.453333rem;
  height: 0.453333rem;
}

.nav-bar .center {
  font-size: 0.48rem;
  font-weight: 700;
  color: #fff;
}

.nav-bar .right {
  width: 1.533333rem;
  font-size: 0.373333rem;
  font-weight: 400;
  color: #fff;
}

.content_box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.6rem;
  width: 9.173333rem;
  height: 5.813333rem;
  background: linear-gradient(180deg, #9c8de9, #747df0);
  border-radius: 0.266667rem;
  box-shadow: 0 0.04rem 0.266667rem 0 rgba(0, 0, 0, 0.16);
}

.feedback_status {
  width: 1.8rem;
  height: 0.72rem;
  background: #5e72eb;
  border-radius: 0.36rem;
  text-align: center;
  line-height: 0.72rem;
  font-size: 0.32rem;
  color: #fff;
  margin: 0.533333rem auto;
}

.content_title {
  font-size: 0.826667rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.test {
  margin-top: 0.4rem;
  font-size: 0.32rem;
  font-weight: 400;
  text-align: center;
  color: #ffe228;
}

.tips-box {
  margin-top: 0.8rem;
}

.tips-box div:last-child {
  margin-top: 0.16rem;
}

.tips-list {
  display: flex;
  align-items: center;
  font-size: 0.346667rem;
  color: #fff;
}

.tips-list span {
  width: 0.346667rem;
  height: 0.346667rem;
  background: #fff;
  border-radius: 50%;
  font-size: 0.266667rem;
  font-weight: 400;
  text-align: center;
  line-height: 0.346667rem;
  color: #757def;
  margin: 0 0.133333rem 0 0.266667rem;
}

.tips-list p {
  margin: 0;
}

.game_info {
  margin-top: 0.4rem;
  box-sizing: border-box;
  width: 10rem;
  height: auto;
  padding: 0 0.426667rem;
}

.info_list li {
  width: 100%;
  height: 1.066667rem;
  display: flex;
  align-items: center;
}

.info_list li span {
  margin-right: 0.4rem;
  width: 1.946667rem;
  height: 0.666667rem;
  background: #f5f5f5;
  border-radius: 0.333333rem;
  font-size: 0.346667rem;
  font-weight: 400;
  text-align: center;
  line-height: 0.666667rem;
  color: #777777;
}

.info_list li h3 {
  font-size: 0.346667rem;
  font-weight: 400;
  color: #222222;
}

.btn_box {
  box-sizing: border-box;
  width: 8rem;
  height: 1.066667rem;
  margin: 0.8rem auto;
  background: #f6f4ff;
  border: 0.013333rem solid #a4a3da;
  border-radius: 0.533333rem;
  text-align: center;
  line-height: 1.066667rem;
  color: #7d80d4;
  font-size: 0.48rem;
  font-weight: 800;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

.dlg {
  width: 8.533333rem;
  height: 8.8rem;
  background: #fff;
}

.dlg_header {
  width: 8.533333rem;
  height: 1.333333rem;
  background: #ff5543;
  font-size: 0.426667rem;
  color: #fff;
  text-align: center;
  line-height: 1.333333rem;
}

.dlg_content {
  box-sizing: border-box;
  padding: 0.32rem 0.4rem 0;
}

.dlg_content_title {
  font-size: 0.346667rem;
  display: flex;
}

.dlg_content_title h3 {
  margin: 0 0 0.266667rem 0;
}

.dlg_list li {
  margin-bottom: 0.133333rem;
  width: 7.733333rem;
  height: 1.173333rem;
  background: #f8f8f8;
  border-radius: 0.133333rem;
  display: flex;
  align-items: center;
}

.dlg_list li input {
  outline: none;
  margin: 0 0.186667rem 0 0.266667rem;
  width: 0.4rem;
  height: 0.4rem;
  background: #ffffff;
  border: 0.013333rem solid #999999;
  border-radius: 50%;
}

.dlg_list li label {
  font-size: 0.32rem;
  font-weight: 400;
  color: #666666;
}

.dlg_tips {
  margin-top: 0.266667rem;
  font-size: 0.346667rem;
  color: #e32222;
}

.dlg_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 8.533333rem;
  height: 1.333333rem;
  border-top: 0.013333rem solid #d2d2d2;
  border-radius: 0 0 0.4rem 0.4rem;
  font-size: 0.426667rem;
  line-height: 1.333333rem;
  text-align: center;
  color: #999999;
}

.dlg_footer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 1.333333rem;
  width: 0.013333rem;
  background: #d2d2d2;
}

.confirm {
  color: #ff5543;
}

.flex {
  flex: 1;
}

.van-radio-group {
  font-size: 0.32rem;
  height: 3.786667rem;
}

.van-radio {
  margin-top: 0.133333rem;
  font-size: 0.32rem;
  height: 1.173333rem;
  color: #666666;
  background: #f8f8f8;
}
</style>